<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:text="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
    <table th:border="2" style="border-collapse: collapse" width="800px" height="400px" >
        <tr th:height="100px">
            <td th:width="60px" >文件名称</td>
            <td th:width="400px" colspan="4" style= "font-weight: bold; font-size: 25px; text-align:center" >员工考勤管理制度</td>
            <td th:width="80px">文件编号</td>
            <td th:width="80px" th:text="${fileNo}"></td>
            <td th:width="80px">页数</td>
            <td th:width="80px"  th:text="${filePage}"></td>
        </tr>
        <tr th:height="100px">
            <td th:rowspan="2" th:width="60px" th:text="制定流程"></td>
            <td th:text="拟定时间" th:width="60px" ></td>
            <td th:width="60px" th:text="${time}"></td>
            <td th:width="60px" >员工代表大会(或全体职工讨论时间)</td>
            <td th:width="60px" th:text="${text}"></td>
            <td th:width="60px" th:text="提出方案时意见情况"></td>
            <td th:width="60px" colspan="3" th:text="${fanan}"></td>
        </tr>
        <tr th:height="100px">
            <td th:text="完善时间" ></td>
            <td th:text="无"></td>
            <td th:text="决定执行时间" ></td>
            <td th:text="${zxTime}"></td>
            <td th:text="公示时间" ></td>
            <td th:text="${gsTime}"></td>
            <td th:text="是否需要告知员工" ></td>
            <td th:text="是"></td>
        </tr>
        <tr th:height="50px">
            <td th:text="改订流程" rowspan="2"></td>
            <td th:text="修订日期" rowspan="2"></td>
            <td rowspan="2" th:text="${xdTime}"></td>
            <td th:text="修订程序执行情况" rowspan="2"></td>
            <td rowspan="2" th:text="${zx}"></td>
            <td th:text="备注事项" rowspan="2"></td>
            <td th:text="制定部门" ></td>
            <td th:text="审核"></td>
            <td th:text="批准"></td>
        </tr>
        <tr th:height="50px">
            <td th:text="${org}"></td>
            <td th:text="${sh}"></td>
            <td th:text="${pz}"></td>
        </tr>
    </table>
    <!-- 切换显示/隐藏的按钮  th:if="${showDiv}"-->
    <div id="additionalContent" th:if="${showDiv}">
        <button id="removeButton">-</button> <!-- 减号按钮 -->
        <div id="removableContent">
            <p><b>1&nbsp;&nbsp; 目的</b></p>
            <!--    <span>1 目的</span>-->
            <p style="text-indent: 2em;">规范和完善公司考勤制度，明确劳动纪律，为员工计发工资奖金，劳保福利等待遇提供重要依据。</p>

            <p><b>2&nbsp;&nbsp; 适用范围</b></p>
            <p style="text-indent: 2em;" th:utext="'本制度使用于<u>'+${name}+'</u>公司（如有分公司、项目部、办事处可增加填写）'"></p>

            <p><b>3&nbsp;&nbsp; 参照</b></p>
            <p style="text-indent: 2em;" th:text="无"></p>

            <p><b>4&nbsp;&nbsp; 各执行部门职责</b></p>
            <p>4.1&nbsp;&nbsp; 人力资源部门:</p>
            <p style="text-indent: 2em;" >(1)&nbsp;&nbsp;考勤制度的制定、修订、解释、执行;</p>
            <p style="text-indent: 2em;" >(2)&nbsp;&nbsp;考勤管理;</p>

            <p>4.2&nbsp;&nbsp; 各部门:</p>
            <p style="text-indent: 2em;" >(1)&nbsp;&nbsp;协助人力资源管理部门做好考勤管理工作;</p>
            <p style="text-indent: 2em;" >(2)&nbsp;&nbsp;负责本部门的考勤工作;</p>

            <p>4.3&nbsp;&nbsp; 分公司: 负责本单位员工考勤管理制度的执行。</p>
        </div>
    </div>

    <!-- 将 showDiv 的值存储在一个隐藏的字段中 -->
    <input type="hidden" id="showDivValue" th:value="${showDiv}" />

    <!-- 下载按钮 -->
    <button id="downloadButton">下载文档</button>
</body>

<script>

    let showDivValue = true;

    document.getElementById('removeButton').addEventListener('click', function() {
        var removableContent = document.getElementById('removableContent');
        removableContent.innerHTML = '';  // 仅清空可移除的内容
        showDivValue = false;  // 设置内容已移除的标志
    });


    document.getElementById('downloadButton').addEventListener('click', function() {
        // 构造请求体，包含页面当前状态
        const data = { showDivValue: showDivValue };

        // 发起请求到后端，下载文件
        fetch('/test/genera', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(response => response.blob())
            .then(blob => {
                // 创建下载链接
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                a.download = 'generated-doc.docx';
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
            })
            .catch(error => console.error('下载出错:', error));
    });
</script>


</html>